<template>
  <view class="cookContainer">
    <!-- :title="'首页'" -->
    <cunstom_navigation_bar_input :propStyles="propStyles" :title="'厨师详情'">
    </cunstom_navigation_bar_input>
    <view class="contentBox">
      <view class="tabs">
        <view class="left" :class="selectedIndex ==1?'selected':'tab'" @tap="selectedIndex=1">
          <image src="https://visionmpapi.jiuerjindi.com/upload/mp/mall/icon2.png"></image>
          周边厨娘
        </view>
        <view :class="selectedIndex ==2?'selected':'tab'" @tap="selectedIndex=2">
          <image src="https://visionmpapi.jiuerjindi.com/upload/mp/mall/icon1.png"></image>
          周边网点
        </view>
      </view>
      <view class="map">
		  <map style="width: 99%; height: 99%;" 
		     :latitude="latitude" 
		     :longitude="longitude" 
		     :markers="covers"
			 @markertap= "markerHandel"
		     :scale="12">
		    </map>
	  </view>
      <view class="addressBox" v-if="showChuniang">
        <view class="address">
          <view class="line1">
            <view class="left">苏州工业园区南施街12号...</view>
            <view class="right">2.5公里</view>
          </view>
          <view class="line2">

            <image class="cookImg" :src="imgDomain + cookInfo.avatar"></image>
            <view class="infoBox">
              <view class="line1-1">
                <view class="name">{{ cookInfo.name }}</view>
                <view class="level">{{cookInfo.nickname}}</view>
              </view>
              <view class="line2">{{cookInfo.cook_age}}年厨领 | 评分{{cookInfo.score}}分</view>
              <view class="line3">
                <view class="type" v-for="(cuisine,idx) in getCuisineByIds(cookInfo.cuisine_ids)">{{cuisine.name}}</view>
              </view>
              <view class="line4">
                <view>{{cookInfo.desc}}</view>
				<!--
                <view>中国烹饪协会备案厨师</view>
				-->
              </view>
              <view class="line5">
                <view class="left"  @tap="jumpUrl('/page_registerCook/registerCook')">我想加入</view>
                <view class="right" @tap="showCook(item)">
                  <image src="https://visionmpapi.jiuerjindi.com/upload/mp/cook/button.png"></image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="zhanwei"></view>
	
	
	
	<view class="specificationsMask" catchtouchmove='true' v-if="showSpecificationsPopup">
	  <view class="mask" @click="showSpecificationsPopup =false"></view>
	  <view class="specificationsPopup">
	
	    <view class="productInfo">
	      <image :src="imgDomain + cookInfo.avatar" class="selectedImg">
	      </image>
	      <view class="middleTxt">
	        <view class="productName">请选择规格，代购食材</view>
	        <view class="type">1件超值换购</view>
	        <view class="price">￥{{price}}</view>
	      </view>
	
	    </view>
	    <view class="specifications">
	      <view class="title">规格</view>
	      <view class="speciLine">
	        <view :class="currentType == idx?'eachSelected':'each'" v-for="(item,idx) in typeList"
	          @tap="selectType(idx)"> {{ item.goods_sku_text}} </view>
	      </view>
	    </view>
	    <view class="specifications">
	      <view class="title">代购食材</view>
	      <view class="speciLine">
	        <view :class="currentBuy == idx?'eachSelected':'each'" v-for="(item,idx) in buyList" @tap="selectBuy(idx)">
	          {{ item.name }}</view>
	
	      </view>
	    </view>
	
	    <view class="specifications">
	      <view class="title">
	        预约时间<span style="color: red;">*</span>
	      </view>
	      <uni-datetime-picker type="datetime" :clear-icon="false" v-model="pickUpTime" :start="'{{startDate}}'"
	        @change="chooseTime">
	        <view class="bar">
	          <view class="left">{{pickUpTime?pickUpTime:'选择预约时间'}}</view>
	          <image src="https://visionmpapi.jiuerjindi.com/upload/mp/cook/timeIcon.png">
	        </view>
	      </uni-datetime-picker>
	    </view>
	    <view class="buttons">
	      <view class="buy" @tap="submit()">确定</view>
	    </view>
	  </view>
	</view>
	
    <tab_bar :current-page="3" ref='tabBar'></tab_bar>
  </view>


  </view>
</template>

<script>
  const api = require("@/utils/api.js");
  const util = require("@/utils/util.js");
  const app = getApp();

  // import cunstomNavigationBar from '../../components/customNavigationBar/customNavigationBar.vue'
  export default {
    data() {
      return {
		price: 0,
		imgDomain:'',
        selectedIndex: 1,
        currentNum: 1,
        showSpecificationsPopup: false,
        cookList: [{
          name: '李力华',
          level: "高级厨师",
          year: 5,
          score: 3.5,
          types: ['苏菜', '川菜', '浙菜'],
          titles: [
            '中国烹饪协会艺术委员会委员',
            '中国烹饪协会备案厨师'
          ]
        },
        {
          name: '夏琪',
          level: "高级厨师",
          year: 5,
          score: 3.5,
          types: ['苏菜', '川菜', '浙菜'],
          titles: [
            '中国烹饪协会艺术委员会委员',
            '中国烹饪协会备案厨师'
          ]
        },
        {
          name: '严琴',
          level: "高级厨师",
          year: 5,
          score: 3.5,
          types: ['苏菜', '川菜', '浙菜'],
          titles: [
            '中国烹饪协会艺术委员会委员',
            '中国烹饪协会备案厨师'
          ]
        },
        ],
        starLevel: '',

        rangeProperty: [
          { value: 10101, text: "一星" },
          { value: 10102, text: "二星" },
          { value: 10103, text: "三星" },
          { value: 10104, text: "四星" },
          { value: 10105, text: "五星" },
        ],

        picData: [],
        codeId: '',
        openId: '',
        avatarUrl: 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/page_login/headPortrait.png',
        hasLogin: false,
        indicatorDots: false,

        cookInfoData: [
          {
            nickName: 'charlotte',
            gender: 0,
            age: 26,
            addr: '广州',
            text: '厨娘平台真的很给力！！尽情享受',
            tag: '做饭教程',
            url: '',
            type: 'image',
            hashTag: '做饭',
            liked: 20,
            hasLiked: true,
            share: 33,
            comment: 209,
            collection: 99,
            hasCollect: true
          },
          {
            nickName: '中华小当家',
            gender: 1,
            age: 26,
            addr: '广州',
            text: '厨娘平台真的很给力！！尽情享受',
            tag: '做饭教程',
            url: '',
            type: 'image',
            hashTag: '做饭',
            liked: 20,
            hasLiked: true,
            share: 33,
            comment: 209,
            collection: 99,
            hasCollect: false

          }, {
            nickName: 'mark',
            gender: 0,
            age: 26,
            addr: '广州',
            text: '厨娘平台真的很给力！！尽情享受',
            tag: '做饭教程',
            url: '',
            type: 'video',
            hashTag: '做饭',
            liked: 20,
            hasLiked: false,
            share: 33,
            comment: 209,
            collection: 99,
            hasCollect: true

          }
        ],
        productData: [
          {
            name: '西蓝花',
            price: '18.00',
            discountPrice: '12.00',
            unit: 'kg',
            type: '净菜',
            liked: false
          },
          {
            name: '空心菜',
            price: '5.00',
            discountPrice: '4.50',
            unit: '500g',
            type: '净菜',
            liked: false
          },
          {
            name: '大白菜',
            price: '15.00',
            discountPrice: '12.00',
            unit: 'kg',
            type: '毛菜',
            liked: false
          },
          {
            name: '土豆',
            price: '11.00',
            discountPrice: '9.00',
            unit: '280g',
            type: '毛菜',
            liked: true
          },
          {
            name: '玉米/鸡蛋/葱辣子',
            price: '45.00',
            discountPrice: '39.00',
            unit: '份',
            type: '套餐',
            liked: true
          },
          {
            name: '毛肚/黄喉/鹅肠',
            price: '98.00',
            discountPrice: '65.00',
            unit: '份',
            type: '套餐',
            liked: true
          },
        ],

  
        imgUrl: '',
        mouduleTypes: [
          {
            name: '全部'
          },
          {
            name: '湘菜'
          },
          {
            name: '粤菜'
          },
          {
            name: '川菜'
          },
          {
            name: '鲁菜'
          },
          {
            name: '苏菜'
          },
          {
            name: '浙菜'
          },
          {
            name: '火锅'
          },
          {
            name: '家常菜'
          },
        ],

        queryParams: {
          "modulesId": '', //模块id
          "mallProductName": '', //商品名称
          "pageNum": 1, //页数
          "pageSize": 200 //每页数量
        },
        propStyles: {
          // scan: true
          zhanweiColor: '#FFFFFF',
          txtColor: 'red',
          bgColor: 'transparent',

          // bgSrc: "https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/bg1.png",
          // bgSrc1: "https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/bg2.png"
        },
		longitude: '116.473115',
		latitude: '39.993207',
		covers: [
		],
		queryParams:{
			"page": 1,
			"limit": 20,
			"city": '苏州',
			"cuisine_ids": '',
			"longitude": '120.598346',
			"latitude": '31.287181',
			"width": '30', // 标记点图标宽度
			"height": '50' // 标记点图标高度
		},
		showChuniang: false,
		cookInfo: null,
		cuisineList: [],
		typeList:[],
		buyList:[],
		currentType: 0,
		currentBuy: 0,
		topList: [],
		pickUpTime: '',
		cuisine_ids: "",

      };
    },

    methods: { 
	   chooseTime(event){
			
	  },
      changeIndex(index) {
        this.selectedIndex = index
      },
      closeInvitate() {
        this.$refs.popUpCoupon.close();
      },

      // 是否可以领证 0否 1是
      receiveStatus(status) {
        if (status == 1) {
          return '可领证'
        }
        // else if (status == 3) {
        //   return '已领证'
        // }
      },
      jumpTo() {


        uni.navigateTo({
          url: `/page_cookDetail/cookDetail`,
        }) 
      },

 
      getProductList() {

        util.request(api.productList,
          this.queryParams

          , 'GET', 'application/json').then(res => {

            if (res.code == 200) {
              this.productData = res.rows
              // this.showData = res.data;
 

            } else {

              util.toast('查询失败')
            }

          }).catch((err) => {
            console.log('err', err)

          });

      },
      jumpUrl(url) {
        uni.navigateTo({
            url: url,
        })
      },
      initMap(){
		  console.log("app.globalData.longitude:" + app.globalData.longitude);
		  console.log("app.globalData.latitude:" + app.globalData.latitude);
		  
		  this.longitude = app.globalData.longitude;
		  this.latitude = app.globalData.latitude ;
		  
		  this.queryParams.longitude = app.globalData.longitude;
		  this.queryParams.latitude = app.globalData.latitude ;
		  
		  let that = this;
		  util.request(api.cookList,
		    this.queryParams
		    , 'GET', 'application/json').then(res => {
		      if (res.code == 200) {              
		  	   let cookList = res.data.data;
		       cookList.forEach(v=>{
				   console.log("-> v.id:"+ v.id);
				   that.covers.push(
				   {
					   "id" : parseInt(v.id) ,
					   "longitude" : v.longitude,
					   "latitude" : v.latitude,
					   "iconPath" : "/static/images/point.png",
					    context:v,
						"width": '30', // 标记点图标宽度
						"height": '50' // 标记点图标高度
				   });
			   })
			   
		      }
		  
		    }).catch((err) => {
		      console.log('err', err)
				
		    }); 
	  },
	  markerHandel(e){
		  console.log("---> e.detail :"+ e.detail.markerId);
		  const { markerId } = e.detail;
		  const marker = this.covers.find((m) => m.id === markerId );
		  console.log("---> marker :"+ JSON.stringify(marker ));
		  this.cookInfo = marker.context;
		  this.showChuniang = true;
	  },
	  mapHandel(e){
		  console.log("---> e.detail1 :"+ e.detail.markerId);
		  this.showChuniang = false;
	  },
	  // 根据ids 获取菜品信息
	  getCuisineByIds(ids){
		const result = [];
		let b = ids.split(",");
		let a = this.cuisineList;
		if(b && a){
			for (let i = 0; i < b.length; i++) {
				const id = b[i];
				for (let j = 0; j < a.length; j++) {
					if (a[j].id === id) {
						result.push(a[j]);
					}
				}
			} 
		}
		// 返回结果数组
		return result;
	  },
      getCuisineList() {
        let params = { page: 1, limit: 1000 };
        util.request(api.cuisineList, params
          , 'GET', 'application/json').then(res => {
            if (res.code == 200) {
              //this.cuisineList = res.data.data;
              this.cuisineList = this.cuisineList.concat(res.data.data);
            }

          }).catch((err) => {
            console.log('err', err)

          });
      },
	  submit(){
		console.log("--> this.cookInfo:"+ JSON.stringify(this.cookInfo));
		if(this.pickUpTime==''){
			util.toast('预约时间不能为空')
			return;
		}
		// 预约时间
		uni.setStorageSync('cookTime',this.pickUpTime);
		// 规格
		let type = this.typeList[this.currentType] ;
		uni.setStorageSync('currentType',type);
		// 食材
		let buy = this.buyList[this.currentBuy] ;
		uni.setStorageSync('currentBuy',buy);
		// 价格
		uni.setStorageSync('price',this.price);
		// 厨师id 
		uni.setStorageSync('cook_id',this.cookInfo.id);
		
		uni.navigateTo({
			url: `/page_bookDetail/bookDetail?id=`+this.cookInfo.id,
		}) 
	  },
      // 预约
      showCook() {
        this.selectType(0);
        this.selectBuy(0);
        this.currentNum = 1;
        this.changeCurrentNum(0);

        this.showSpecificationsPopup = true;
      },
      selectType(idx) {
        this.currentType = idx;
        if (this.typeList) {
          this.price = this.typeList[idx].price;
        }
        this.currentNum = 1;
      },
      getSku() {
        let params = {};
        util.request(api.getSku, params
          , 'GET', 'application/json').then(res => {
            if (res.code == 200) {
              this.typeList = res.data.listPrice;
              this.buyList = res.data.listData;

              // 初始化价格
              this.selectType(0);
            }

          }).catch((err) => {
            console.log('err', err)

          });
      },
      selectBuy(idx) {
        this.currentBuy = idx;
      },
      // 购买数量
      changeCurrentNum(num) {
        this.currentNum = this.currentNum + num;
        if (this.currentNum <= 1) {
          this.currentNum = 1;
        }
        this.price = this.typeList[this.currentType].price * this.currentNum;
      }
	 

    },



    mounted() {


    },
    created() {

    },
    onLoad: function (option) {

      this.imgUrl = process.env.VUE_APP_BASE_URL + '/stage-api/file/statics'
      this.imgDomain = process.env.VUE_APP_BASE_URL;

	  this.initMap();
	  this.getCuisineList();
      this.getSku();


    },
    onUnload() {

    },
    onShow: function () {
      uni.hideTabBar()
      this.$refs.tabBar.changeCurrentPage(3)
    },

  };
</script>
<style lang="scss">
  page {
    height: 100vh;
    overflow: auto;
    background-color: #FFFFFF !important;
  }
</style>
<style lang="scss" scoped>
  page {
    background-color: #FFFFFF !important;
  }

  .cookContainer {
    display: flex;
    flex-direction: column;
    height: 100%;
  }



  .contentBox {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;

    .tabs {
      width: 750rpx;
      height: 110rpx;
      background-color: #FFFFFF;
      display: flex;
      align-items: center;

      .left {
        margin: 0rpx 30rpx;
      }

      .tab {
        padding: 0rpx 12rpx;
        width: 204rpx;
        height: 62rpx;
        font-weight: 500;
        font-size: 32rpx;
        color: #333333;
        display: flex;
        align-items: center;

      }

      .selected {
        padding: 0rpx 12rpx;
        font-weight: 500;
        font-size: 32rpx;
        color: #333333;
        width: 204rpx;
        height: 62rpx;
        border-radius: 30rpx;
        background-color: #FECF01;
        display: flex;
        align-items: center;
      }

      image {
        width: 38rpx;
        height: 38rpx;
        margin-right: 14rpx;
      }
    }

    .map {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .addressBox {
      width: 100%;
      height: 420rpx;
      position: absolute;
      bottom: 0rpx;
      left: 0rpx;
      display: flex;
      justify-content: center;

      .address {
        width: 690rpx;
        height: 420rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.16);
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        padding: 36rpx 18rpx 36rpx 26rpx;

        .line1 {
          display: flex;
          justify-content: space-between;

          .left {
            width: 378rpx;
            font-weight: 400;
            font-size: 32rpx;
            color: #07203C;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }

          .right {
            font-weight: 500;
            font-size: 28rpx;
            color: rgba(217, 63, 17, 0.6);
          }

        }

        .line2 {
          display: flex;


          .cookImg {
            width: 256rpx;
            height: 256rpx;
            margin-right: 32rpx;
          }

          .infoBox {
            margin-top: 36rpx;
            .line1-1 {
              display: flex;
              align-items: center;
              margin-bottom: 16rpx;
              .name {
                font-weight: 500;
                font-size: 32rpx;
                color: #333333;
                margin-right: 26rpx;
              }

              .level {
                width: 94rpx;
                height: 32rpx;
                border-radius: 10rpx 10rpx 10rpx 10rpx;
                border: 1rpx solid #D93F11;
                font-weight: 500;
                font-size: 20rpx;
                color: #D93F11;
                line-height: 32rpx;
                text-align: center;
              }
            }

            .line2 {
              font-weight: 400;
              font-size: 24rpx;
              color: rgba(51, 51, 51, 0.6);
              margin-bottom: 16rpx;
            }

            .line3 {
              display: flex;

              .type {
                padding: 0rpx 12rpx;
                height: 28rpx;
                background: #F9F5E6;
                border-radius: 8rpx 8rpx 8rpx 8rpx;
                font-weight: 400;
                font-size: 20rpx;
                color: #D93F11;
                margin-right: 8rpx;
              }
            }

            .line4 {
              margin-bottom: 10rpx;
              view {
                font-weight: 400;
                font-size: 24rpx;
                color: rgba(51, 51, 51, 0.6);
              }
            }
            .line5 {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left {
              width: 39.63*2rpx;
              height: 13.86*2rpx;
              border-radius: 10*2rpx;
              font-size: 8*2rpx;
              font-weight: 500;
              line-height: 13.86*2rpx;
              text-align: center;
              color: #D93F11;
              border: 1rpx solid #D93F11;
            }

            .right {
              image {
                width: 43*2rpx;
                height: 22*2rpx;
              }
            }
          }
          }
        }
      }
    } 

  }


  .specificationsMask {
    z-index: 999 !important;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0rpx;
    left: 0rpx;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;

    .mask {
      width: 100%;
      flex: 1;

    }

    .specificationsPopup {
      width: 100%;
      height: 1080rpx;
      background-color: #FFFFFF;
      border-radius: 20rpx 20rpx 0rpx 0rpx;


      .productInfo {
        display: flex;
        border-bottom: 1rpx solid #DEDEDE;
        padding-bottom: 30rpx;
        margin: 40rpx 23rpx 0rpx;

        .selectedImg {
          width: 208rpx;
          height: 208rpx;
          margin-right: 24rpx;
        }

        .middleTxt {
          .productName {
            width: 384rpx;
            height: 50rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;

          }

          .type {
            padding: 0rpx 6rpx;
            height: 34rpx;
            background: rgba(217, 63, 17, 0.1);
            border-radius: 10rpx 10rpx 10rpx 10rpx;
            font-size: 16rpx;
            color: #D93F11;
            line-height: 34rpx;
            text-align: center;
            display: inline-block;
            margin-top: 8rpx;
          }

          .price {
            margin-top: 12rpx;
            font-weight: 500;
            font-size: 28rpx;
            color: #D93F11;

          }
        }


      }

      .specifications {
        padding: 30rpx;

        .title {
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
          margin-bottom: 28rpx;
        }

        .speciLine {
          display: flex;
		  flex-wrap: wrap; /* 允许子元素换行 */
          .each {
            padding: 0rpx 16rpx;
            height: 40rpx;
            background: rgba(51, 51, 51, 0.1);
            border-radius: 214rpx 214rpx 214rpx 214rpx;
            margin-right: 28rpx; 
			margin-bottom: 8rpx;
            font-weight: 500;
            font-size: 18rpx;
            color: rgba(51, 51, 51, 0.8);
            line-height: 40rpx;
          }

          .eachSelected {
            padding: 0rpx 16rpx;
            height: 40rpx;
            background: #FECF01;
            border-radius: 214rpx 214rpx 214rpx 214rpx;
            margin-right: 28rpx;
			margin-bottom: 8rpx;
            font-weight: 500;
            font-size: 18rpx;
            color: rgba(0, 0, 0, 0.8);
            line-height: 40rpx;
          }
        }

        .bar {
          width: 690rpx;
          height: 88rpx;
          background: rgba(51, 51, 51, 0.1);
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-left: 24rpx;
          padding-right: 36rpx;

          .left {
            font-weight: 500;
            font-size: 28rpx;
            color: rgba(51, 51, 51, 0.4);
          }

          image {
            width: 52rpx;
            height: 52rpx;
          }
        }

      }



      .productQuantity {
        margin: 0rpx 23rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 6rpx dotted #ccc;
        height: 120rpx;

        .left {
          .title {
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }

          .stock {
            color: #999999;
            font-size: 22rpx;
            margin-top: 20rpx;
          }


        }

        .right {
          display: flex;

          .add,
          .subtraction {
            width: 70rpx;
            height: 70rpx;
            background: #F4F4F2;
            border-radius: 10rpx;
            text-align: center;
            line-height: 70rpx;
          }

          .currentNum {
            min-width: 70rpx;
            height: 70rpx;
            line-height: 70rpx;
            text-align: center;
            background: #FECF01;
            border-radius: 15rpx;
            margin: 0rpx 18rpx;
          }
        }

      }

      .buttons {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .buy {

          line-height: 98rpx;
          text-align: center;
          font-weight: 600;
          font-size: 32rpx;
          color: #333333;

          width: 692rpx;
          height: 98rpx;
          background: #FECF01;
          box-shadow: 0rpx 6rpx 10rpx 4rpx rgba(0, 0, 0, 0.07);
          border-radius: 20rpx 20rpx 20rpx 20rpx;
        }
      }
    }
  }




  .zhanwei {
    width: 750rpx;
    height: 172rpx;
    background: #F4F4F2;
  }

  /deep/ .arrow-area {
    display: none;
  }

  /deep/ .input-value-border {
    border: none
  }

  /deep/ .placeholder {
    font-size: 29rpx;
    color: #FECF01;
  }

  /deep/ .input-value {
    padding-right: 34rpx;
    padding-left: 10rpx;
  }

  /deep/ .is-input-border {
    border-radius: 20rpx;
  }

  ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
  }
</style>